<template>
    <div id="app_login">
        <div class="go_back_sanjiao"><a href="javascript:;" @click="$router.back()"></a></div>
        <h1 class="login_title">硅谷外卖</h1>
        <div class="tab_btns">
            <span class="xinxi_btn" :class="{cuttent_btn: LoginType}" 
            @click="$router.replace('/login/xinxi').catch(() => {
                return '';
            });LoginType = true">短信登录</span>
            <span class="password_btn" :class="{cuttent_btn: !LoginType}" 
            @click="$router.replace('/login/password').catch(() => {
                return '';
            });LoginType = false">密码登录</span>
        </div>
        <div class="current_line" :class="{line_on: !LoginType}"></div>
        <!-- 占位 -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                LoginType: this.$route.path == '/login/password' ? false : true  //True 为短信登录 False 为密码登录
            }
        },
        mounted() {
        },
    }
</script>

<style lang="stylus" scoped>
    #app_login
        .login_title
            text-align center
            color #02a774
            font-size 45px
        .go_back_sanjiao
            a
                display block
                width 12px
                height 12px
                border-top 3px solid #c2c2c2
                border-left 3px solid #c2c2c2
                transform rotate(-45deg)
                margin 15px 0 0 15px
        .tab_btns
            display flex
            justify-content center
            .cuttent_btn
                color green !important
            span
                color black
                font-size 18px
                &:nth-child(1)
                    margin-right 55px
        .current_line
            position relative
            left 50%
            transform translateX(-155%)
            // transform translateX(55%)
            height 5px
            width 60px
            background-color green
            border-radius 5px
            margin-top 5px
        .line_on
            transform translateX(55%) !important
</style>